<template>
  <div>
    <el-table :data="books" style="width: 100%">
      <el-table-column prop="id" label="ID" width="50"></el-table-column>
      <el-table-column prop="title" label="书名"></el-table-column>
      <el-table-column prop="author" label="作者"></el-table-column>
      <el-table-column prop="copies" label="库存"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="deleteBook(scope.$index)" type="danger" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="添加图书" :visible.sync="dialogVisible">
      <el-form :model="newBook">
        <el-form-item label="书名">
          <el-input v-model="newBook.title"></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="newBook.author"></el-input>
        </el-form-item>
        <el-form-item label="库存">
          <el-input v-model="newBook.copies" type="number"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addBook">确定</el-button>
      </div>
    </el-dialog>

    <el-button type="primary" @click="dialogVisible = true">添加图书</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      newBook: {
        title: '',
        author: '',
        copies: 1,
      },
      books: [
        { id: 1, title: "Python编程", author: "John Doe", copies: 4 },
        { id: 2, title: "历史的秘密", author: "Jane Smith", copies: 3 },
        { id: 3, title: "宇宙探索", author: "Emily Brown", copies: 2 },
        { id: 4, title: "健康生活", author: "Mike Johnson", copies: 5 },
        { id: 5, title: "数学之美", author: "Sarah Lee", copies: 4 },
        { id: 6, title: "艺术欣赏", author: "David White", copies: 3 },
        { id: 7, title: "编程入门", author: "Alice Green", copies: 2 },
        { id: 8, title: "科幻世界", author: "Frank Black", copies: 5 },
        { id: 9, title: "自然奇观", author: "Grace Blue", copies: 4 },
        { id: 10, title: "音乐之声", author: "Tom Red", copies: 3 },
      ],
      nextId: 11,
    }
  },
  methods: {
    addBook() {
      if (this.newBook.title && this.newBook.author && this.newBook.copies) {
        this.books.push({ id: this.nextId++, ...this.newBook });
        this.dialogVisible = false;
        this.newBook = { title: '', author: '', copies: 1 };
      } else {
        this.$message.error('请完整填写图书信息');
      }
    },
    deleteBook(index) {
      this.books.splice(index, 1);
    }
  }
}
</script>

<style>
.el-button {
  margin: 20px 0;
}
</style>